<template>
  <div>
    <tableComponents :pagination="{ currentPage, pageSize, total: list.all_num }" @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange" @sendUserSearch="getSearch" :searchData="searchData" :isHaveExport="false" @toAdd="editHotelHome">
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list.data" stripe v-loading="loading" header-row-class-name="head_color" tooltip-effect="dark"
            style="width: 99.8%">
          <el-table-column label="房间图片" min-width="100">
            <template slot-scope="scope">
              <el-popover placement="right" title trigger="hover">
                <img :src="$fnc.getImgUrl(scope.row.img)" style="width:300px;" />
                <img slot="reference" :src="scope.row.img" :alt="scope.row.img" style="width:100px" />
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column label="房间名称" min-width="120">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>

          <el-table-column label="房间信息" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <!-- <span>价格：</span>
                <small>{{ scope.row.price | keepTwoNum }}</small>
                <br /> -->
                <span>数量：</span>
                <small>{{ scope.row.number }}</small>
                <br />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="其他信息" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <span>标签：</span>
                <small>{{ scope.row.label }}</small>
                <br />
                <span>url：</span>
                <small>{{ scope.row.url }}</small>
                <br />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-row class="myblank">
                <el-button :loading="$store.state.isLoading" size="mini" @click="goHotelHome(scope.row.id)" type="success">类型管理</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" @click="editHotelHome(scope.row)" type="primary">编辑</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" type="danger" @click="deleteNew(scope.row.id)">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog :close-on-click-modal="false" :title="HotelHome.id ? '编辑' : '添加'" :modal-append-to-body="false" :visible.sync="showHotelHome"
        class="tl size_13" width="800px">
      <el-form :model="HotelHome" label-width="120px">
        <el-form-item label="房间名" required>
          <el-col :span="12">
            <el-input v-model="HotelHome.title" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="图片地址" required>
          <el-col :span="12" class="tl">
            <el-input v-model="HotelHome.img" disabled autocomplete="off" clearable class="mar_bottom_5"></el-input>
            <uploadpic :piclink="HotelHome.img" :width="150" :height="150" :is_more="false" @send_pic="onSuccess1"></uploadpic>
          </el-col>
        </el-form-item>

        <el-form-item label="房间数量" required>
          <el-col :span="12">
            <el-input v-model="HotelHome.number" clearable></el-input>
          </el-col>
        </el-form-item>
        <!-- 
        <el-form-item label="价格" required>
          <el-col :span="12">
            <el-input v-model="HotelHome.price" clearable></el-input>
          </el-col>
        </el-form-item> -->

        <el-form-item label="url">
          <el-col :span="12">
            <el-input v-model="HotelHome.url" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="标签(用@隔开)">
          <el-col :span="12">
            <el-input type="textarea" :rows="3" v-model="HotelHome.label" clearable></el-input>
          </el-col>
        </el-form-item>
        
        <el-form-item>
          <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click.prevent="subHotelHome">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { hotelHomeListSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import uploadpic from "@/components/page/pic/up_pic";
export default {
  data () {
    return {
      searchData: hotelHomeListSearchData,
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      HotelHome: {},
      showHotelHome: false,
      fileList: []
    };
  },
  components: {
    uploadpic,
    compressimgUpload
  },
  methods: {
    goHotelHome (id) {
      this.$store.commit("addbreadcrumbs", {
        title: "类型管理",
        url: `/index/hotel/hotel_home_type_list?id=${id}`
      });
      this.$router.push({
        path: "/index/hotel/hotel_home_type_list",
        query: { id }
      });
    },
    onSuccess1 (pic) {
      this.HotelHome.img = pic;
    },
    editHotelHome (item) {
      if (item) {
        this.HotelHome = item;
      } else {
        this.HotelHome = {
          img: ""
        };
      }
      this.showHotelHome = true;
    },
    subHotelHome () {
      if (this.HotelHome.id) {
        this.$api.getHotel.hotel_home_saveedit(this.HotelHome).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("操作成功");
            this.showHotelHome = false;
            this.getNewsAll(this.searchAll);
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      } else {
        this.HotelHome.id = this.$route.query.id;
        this.$api.getHotel.hotel_home_saveadd(this.HotelHome).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("操作成功");
            this.showHotelHome = false;
            this.getNewsAll(this.searchAll);
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      }
    },
    getSearch (obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    getNewsAll (data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      params.id = this.$route.query.id;
      this.$api.getHotel.hotel_home_lists(params).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange: function (size) {
      var params = this.searchAll;
      params.page = 1;
      params.page_size = size;
      this.pageSize = size;
      this.currentPage = 1;
      this.getNewsAll(params);
    },
    handleCurrentChange: function (currentPage) {
      var params = this.searchAll;
      params.page = currentPage;
      params.page_size = this.pageSize;
      this.currentPage = parseInt(currentPage);
      this.getNewsAll(params);
    },
    deleteNew (id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id: id };
          this.$api.getHotel.hotel_home_del(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getNewsAll(this.searchAll);
            } else {
              this.$swal("删除失败！", res.data.result, "error");
            }
          });
        }
      });
    }
  },
  created () {
    this.getNewsAll();
  }
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}
.user_table span {
  font-size: 13px;
}
</style>
